 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .lis{
         width: 500px;
         height: 300px;
         display: flex;
      }
      img{
         width: 200px;
         height: 200px;
         margin-right: 10px;
      }
      .title{
         width: 300px;
         height: 80px;
      }
      .data{
         color:rgb(196, 112, 112);
      }
      .price{
         width: 200px;
         height: 50px;
      }
      input{
         width: 200px;
      }
      #main{
         width: 100%;
         display: flex;
         flex-wrap: wrap;
      }
      .color{
         color: rgb(224, 151, 42);
      }
    </style>
 </head>
 <body>
   <div id="main">
      <div class="lis" v-for="item in list">
         <img  :src="item.image" alt="" srcset="">
             <div class="list_h">
               <div class="title">{{item.name}}</div>
               <div class="data">库存：{{item.data-item.sum}}</div>
               <div class="price">价格：<div>{{item.price}}</div></div>
               <input type="text" v-model="item.sum">
             </div>
  </div>
  <h3>待付款：<span :class="color">{{fitprice}}元</span></h3>
    <!-- 在上一次基础上，加入监听器和计算属性，用计算属性来计算购买的总价，
 用监听器来控制购买的数量，如果超出了总数给出提示,不能再加数量了. -->
 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <script>
   Vue.createApp({
       data(){
           return{
               list:[
                   {id:0,data:100,sum:null,name:"菠萝",price:"5", image:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi1%2F2833794928%2FO1CN01XEi8am1mH4Q0TWjuk_%21%212833794928.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683794130&t=93bf810636ea7a549545b9e0880e9651"},
                   {id:1,data:100,sum:null,name:"苹果",price:"8",image:"https://img1.baidu.com/it/u=4256354021,131809293&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"},
                   {id:2,data:100,sum:null,name:"香蕉",price:"3",image:"https://img1.baidu.com/it/u=2988607387,3657044968&fm=253&fmt=auto&app=138&f=JPEG?w=397&h=243"}
               ],
               price:0,
               color:"color"
           }
       },
    methods:{
      fit(){

      }
    },
    computed:{
      //  计算多少钱
      fitprice(){
         let sum=null
         this.list.forEach(a=>{
            if (a.sum<=100) {
               sum+=(a.sum*a.price)
            }
         });
         return sum;
      }
    },
    watch:{
      // 对整个数组里相同属性监听
      list:{
         // 启动深度监听
         deep:true,
         handler(newVal,oldVal){
            for(let i=0;i<this.list.length;i++){
               // 判断用户在输入框输入是否超过 库存 100
               if (newVal[i].sum>=100) {
                  this.list[i].sum=100
               }
            }
         }
      }
    }
   }).mount("#main")
</script>
 </body>
 </html>